<template>
    <div class="decorateIndex" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <DecorateHead ref="decorateHead" v-if="pageContent!==null"></DecorateHead>
        <div class="wrapper" v-if="pageContent!==null">
            <DecorateLeft ref="decorateLeft" v-if="pageContent!==null" :pageContent="pageContent"></DecorateLeft>
            <DecorateMain ref="decorateMain" v-if="pageContent!==null"></DecorateMain>
            <DecorateRight ref="decorateRight" v-if="pageContent!==null"></DecorateRight>
        </div>
        <ChooseLinkComponent></ChooseLinkComponent>
        <ChooseImageComponent></ChooseImageComponent>
        <ChooseProjectComponent></ChooseProjectComponent>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import DecorateHead from "./head/Index.vue";
import DecorateLeft from "./left/Index.vue";
import DecorateRight from "./right/Index.vue";
import DecorateMain from "./main/Index.vue";
import ChooseLinkComponent from "../components/vlonChooseLink/Index.vue";
import ChooseImageComponent from "../components/vlonChooseImage/Index.vue";
import ChooseProjectComponent from "../components/vlonChooseProject/Index.vue";
import pageTopComponentData from "@/static/js/decorateComponent/pageTopComponentData.js";
import headApi from '@/utils/hade';
export default {
    name: "decorateIndex",
    data() {
        return {
            loading: false,
            nowType: "add",
            pageId: null,
            pageContent: null,
            //页面底部菜单（可选项）列表
            bottomButtonList: [],
            pageTopComponentData,
        };
    },
    props: [],
    components: {
        DecorateHead,
        DecorateLeft,
        DecorateRight,
        DecorateMain,
        ChooseLinkComponent,
        ChooseImageComponent,
        ChooseProjectComponent,
    },
    created() {},
    mounted() {
        // window.onbeforeunload = (e) => {
        //     e = e || window.event;
        //     // 兼容IE8和Firefox 4之前的版本
        //     if (e) {
        //         e.returnValue = "关闭提示";
        //     }
        //     // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        //     return "关闭提示";
        // };

        this.$nextTick(() => {
            this.getBottomButtonList(() => {
                this.init();
            });
        });
    },
    methods: {
        init() {
            if (localStorage.getItem("decoratePageNowType")) {
                this.nowType = localStorage.getItem("decoratePageNowType");
            }
            if (this.nowType == "edit") {
                if (localStorage.getItem("decoratePageId")) {
                    this.pageId = localStorage.getItem("decoratePageId");

                    if (this.pageId) {
                        this.getComponentList();
                    }
                }
            } else if (this.nowType == "add") {
                let pageType = 0,
                    pageKey = "";

                if (localStorage.getItem("individualizationPageKey")) {
                    //编辑默认的个性化页面，视为新增个性化页面
                    pageType = 1;
                    pageKey = localStorage.getItem("individualizationPageKey");
                    this.pageTopComponentData.right[0].catalog[0].display =
                        "none";
                }

                this.setPageContent({
                    id: "",
                    pageType: pageType,
                    pageKey: pageKey,
                    pageContent: JSON.stringify([this.pageTopComponentData]),
                });
            }
        },
        //查询组件列表
        getComponentList() {
            console.log("in getComponentList");
            if (getToken()) {
                this.axios
                    .get(`${headApi}/appPageContent/${this.pageId}`, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        //console.log(1,res);
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data) {
                                    this.setPageContent(data);
                                } else {
                                    console.log("no data: ", res);
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
            
        },
        //编辑时，回写数据
        setPageContent(d) {
            let data = d;
            if (typeof d === "string") {
                data = JSON.parse(d);
            }
            // console.log("data", data);
            this.pageId = data.id;
            // console.log("this.bottomButtonList",this.bottomButtonList);
            //若存在底部菜单，先将列表装入
            if (
                (data.pageType === 0 || data.pageType === 1) &&
                this.bottomButtonList.length > 0
            ) {
                //把组件数据还原为对象

                let pageContent = new Object();
                if (typeof data.pageContent === "object") {
                    pageContent = data.pageContent;
                } else if (typeof data.pageContent === "string") {
                    pageContent = JSON.parse(data.pageContent);
                }

                //从组件列表中取出顶部组件对象数据
                let topControls = pageContent[0];
                // console.log("topControls",topControls);
                //找到底部菜单组件配置项
                let bottomMenu = topControls.right[0].catalog[2].options;
                //遍历已保存过的所有底部菜单
                this.bottomButtonList.forEach((bbl) => {
                    //若不存在于当前页面底部菜单组件的可选列表中
                    if (!bottomMenu.some((bm) => bm.id == bbl.id)) {
                        //则，追加到可选列表中
                        bottomMenu.push({
                            id: bbl.id,
                            name: bbl.pageName,
                            value: "",
                        });
                    }
                });
                //若存在底部菜单列表
                if (bottomMenu.length > 1) {
                    //反向装回对象集中
                    topControls.right[0].catalog[2].options = JSON.parse(
                        JSON.stringify(bottomMenu)
                    );
                    pageContent[0] = JSON.parse(JSON.stringify(topControls));
                }

                if (data.pageType === 1) {
                    pageContent[0].right[0].catalog[0].display = "none";
                }

                //还原回字符串类型，便于传输
                this.pageContent = JSON.stringify(pageContent);
            } else {
                if (data.pageType === 1) {
                    data.pageContent[0].right[0].catalog[0].display = "none";
                }
                this.pageContent = data.pageContent;
            }

            this.$nextTick(() => {
                if (this.$refs.decorateHead) {
                    if (typeof data === "string") {
                        data = JSON.parse(data);
                    }
                    this.$refs.decorateHead.pageId = data.id;
                    this.$refs.decorateHead.pageKey = data.pageKey;
                    this.$refs.decorateHead.pageType = data.pageType;
                }
            });
        },
        //获取页面底部菜单列表数据
        getBottomButtonList(cb) {
            this.loading = true;
            this.bottomButtonList = [];
            if (getToken()) {
                this.axios
                    .post(
                        `${headApi}/appPageContent/list`,
                        {
                            pageType: 5,
                            tenantId: localStorage.getItem("tenantId"),
                        },
                        { headers: { Authorization: "Bearer " + getToken() } }
                    )
                    .then((res) => {
                        this.loading = false;
                        // console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    this.bottomButtonList = [];
                                    this.bottomButtonList = data;
                                    //此处缓存下来，是用于在配置自定义页面时，选择了显示底部菜单，根据选中的相应底部菜单，显示出具体该菜单的样式渲染好的菜单组件。
                                    localStorage.setItem(
                                        "bottomButtonList",
                                        JSON.stringify(data)
                                    );
                                }
                                if (cb) {
                                    cb();
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                                if (cb) {
                                    cb();
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                            if (cb) {
                                cb();
                            }
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                        if (cb) {
                            cb();
                        }
                    });
            }
        },
    },
    computed: {},
    watch: {},
};
</script>

<style scoped lang="scss">
.decorateIndex {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .wrapper {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        justify-content: space-between;
    }
}
</style>
